<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
            background: #f4f4f4;
            font: 14px/1.5 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
        }

        .container {
            width: 1150px;
            margin: 20px auto;
        }

        .box {
            border-radius: 4px;
            overflow: hidden;
            float: left;
            margin-right: 20px;
            background: #fff;
            position: relative;
            padding-bottom: 5px;
        }

        .box img {
            width: 210px;
            height: 118px;
        }

        .title {
            padding: 0 10px;
            margin-top: 4px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 190px;
        }
    </style>
</head>

<body>

    <button id="change">换一换</button>
    <div class="container">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        // function callback(data){
        //       console.log(data);
        // }
        // 如果动态生一个script标签插入到页面之中，页面会立即发起一个http请求;

        // var script = document.createElement("script");
        // script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=3&pageSize=5&fromId=546&jsonpcallback=callback&_=" + Date.now();
        // console.log(script);

        // 结论 : 如果需要控制 jsonp请求的发送时机可以动态创建script,什么时候这个标签放入页面，什么时候浏览器帮我们发起请求;

        // 1. 点击换一换，发起一个http请求 。 jsonp; 
        // 2. 获取到的数据进行渲染拼接;

        // 猜出接口的参数; 
        // var pageNo = 2;
        // var formId = 379;

        // document.querySelector("#change").onclick = function(){
        //       var script = document.createElement("script")
        //       script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=" + pageNo + "&pageSize=5&fromId="+ formId +"&jsonpcallback=callback&_=" + Date.now();
        //       document.body.appendChild( script );
        // }
        // function callback( data ){
        //       // 渲染页面;
        //       // console.log(data);
        //       // let { datas } = data;
        //       // 提取需要拼接的数据;
        //       var datas = data.datas;
        //       // 字符串拼接;
        //       var html = "";
        //       for(var i = 0 ; i < datas.length ; i ++){
        //             html +=  '<div class="box">' +
        //                         '<img src="'+ datas[i].image +'" alt="">' +
        //                         '<div class="title">' + datas[i].name + '</div>'+
        //                   '</div>'
        //       }
        //       document.querySelector(".container").innerHTML = html;
        //       pageNo ++;
        //       formId = datas[datas.length - 1].courseId;
        // }

        var pageNo = 2;
        var formId = 379;
        $('#change').on('click', function () {
            var htmlStr = '';
            $.ajax({
                // 改变dataType 为jsonp
                dataType: "jsonp",
                url: "https://api.gogoup.com/p1/data/recommend",
                data: {
                    type: 0,
                    pageNo: pageNo,
                    pageSize: 5,
                    fromId: formId,
                    _: Date.now(),
                    jsonpcallback: "callback"
                },

                jsonpCallback: "callback",
                success: function (res) {
                    pageNo++;
                    formId = res.datas[res.datas.length - 1].courseId;
                    for (var i = 0; i < res.datas.length; i++) {
                        htmlStr += '<div class="box">' +
                            '<img src="' + res.datas[i].image + '" alt="">' +
                            '<div class="title">' + res.datas[i].name + '</div>' +
                            '</div>'
                    }
                    $('.container').html(htmlStr);
                }
            })


        })
    </script>
</body>

</html>